<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding,height: '100vh'}">

      <SpecCommodity class="card" v-if="data.length > 0" :data="item"
                     @click="Taro.navigateTo({url:'/pages/view/commodityInfo/index?id='+item.id})"
                     v-for="item in data"
                     style="margin-bottom: 5px;width: 675rpx"
      />
      <nut-empty v-else :image="emptyUrl()" :image-size="100" description="暂无数据"/>


    </view>

  </nut-config-provider>
</template>

<script>
import {ref} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";
import {reactive, toRefs, onMounted} from 'vue'
import Taro from "@tarojs/taro";
import SpecCommodity from "../../../components/specCommodity/index.vue";
import {twProductEnterprisePage, twProductThCatIdList} from "../../../api/product";
import {twPublishMyPage} from "../../../api/publish";
import {emptyUrl} from "../../../utils/imgUtils";

const {theme, themeVars} = useTheme()

const value = ref('2')


const data = ref([]);

const queryParam = ref({current: 1, size: 5, pages: 0})
const getDataPage = () => {

  twProductThCatIdList({...queryParam.value, sortField: 'createTime', sortOrder: "descend",auditStatus:"SUCCESS"}).then(res => {

    if (200 == res.code) {
      data.value = [...data.value, ...res.data.records]
      queryParam.value.pages = res.data.pages;
      console.log("queryParam", queryParam.value)
      console.log("res.data", res.data)
    }
  }).finally(() => {
    Taro.hideLoading();
    Taro.stopPullDownRefresh();
    loadMoreLoading.value = false

  })
}


const refresh = () => {
  queryParam.value.current = 1
  queryParam.value.size = 5
  data.value = []
  getDataPage()
}

const loadMoreLoading = ref(false);
const loadMore = () => {
  if (queryParam.value.current >= queryParam.value.pages) {
    console.log("没有更多数据了")
    Taro.showToast({title: "没有更多数据了", icon: 'none', duration: 1500,});
    return
  }
  loadMoreLoading.value = true
  queryParam.value.current = queryParam.value.current + 1
  getDataPage()
}


// twProductThCatIdList
export default {
  methods: {
    emptyUrl() {
      return emptyUrl
    }
  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {
    console.log(options)
    Taro.setNavigationBarTitle({
      title: options.pathName
    })
    data.value = []
    queryParam.value.thCatId = options.tid
    getDataPage()
  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },


  onPullDownRefresh() {
    console.log("onPullDownRefresh")
    refresh()
  },
  onReachBottom() {
    console.log("onReachBottom")
    loadMore()
  },

  setup() {


    return {
      theme,
      themeVars,
      Taro,
      value,
      data,

    }
  }

}
</script>

<style>


.search-place {
  width: 233px;
  height: 50px;
  background: white;
  border-radius: 29px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
  width: 100%;
}

.data-num-show {
  display: flex;
  font-size: 24px;
  height: 29px;
  color: #D80000;

}

.top-box {
  display: flex;
}


</style>